<script setup lang="ts">
import { Icon } from '@iconify/vue';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();
</script>
<template>
    <div class="pt-16 overflow-hidden bg-light" id="home">
        <v-container>
            <div class="maxWidth">
                <v-row>
                    <v-col cols="12" lg="6" md="12" class="d-flex align-center">
                        <div class="mt-8 mt-lg-0 py-8 pb-0">
                            <span class="text-h6 heading d-flex align-center gap-2" data-aos="fade-up" data-aos-duration="400"
                                ><Icon icon="mdi:handshake" class="text-secondary" /> {{ t('referral.page_title') }}</span
                            >
                            <h1 class="bannerTitle pt-5 font-weight-bold" data-aos="fade-up" data-aos-duration="500">
                                {{ t('referral.headline') }}
                            </h1>
                            <p class="pt-8 pb-6 text-h5 textPrimary font-weight-regular" data-aos="fade-up" data-aos-duration="800">
                                {{ t('referral.subheadline') }}
                            </p>
                            <div class="mt-6 d-sm-flex gap-3" data-aos="fade-up" data-aos-duration="1000">
                                <v-btn target="_blank" href="/auth/login" color="primary" size="large" class="m-btn-full px-12" flat
                                    data-aos="zoom-in" data-aos-delay="100" data-aos-duration="1200">
                                    <Icon icon="mdi:hand-pointing-right" class="mr-2" />
                                    {{ t('referral.login_cta') }}
                                </v-btn>
                                <v-btn
                                    to=""
                                    v-scroll-to="'#features'"
                                    color="primary"
                                    variant="outlined"
                                    class="mt-sm-0 mt-4 lp-btn-shadow m-btn-full px-8"
                                    size="large"
                                    data-aos="zoom-in" data-aos-delay="200" data-aos-duration="1200"
                                    >{{ t('referral.features_title') }}</v-btn
                                >
                            </div>
                        </div>
                    </v-col>
                    <v-col cols="12" md="6" class="d-none d-lg-block pb-0" data-aos="fade-left" data-aos-duration="1000">
                        <div class="bannerSlider">
                            <div class="d-flex flex-row">
                                <div class="rounded-md">
                                    <div class="animateUp"> 
                                        <img src="@/assets/images/landingpage/4.png" />
                                    </div>
                                    <div class="animateUp">
                                        <img src="@/assets/images/landingpage/4.png" />
                                    </div>
                                </div>
                                <div class="rounded-md">
                                    <div class="animateDown">
                                        <img src="@/assets/images/landingpage/5.png" />
                                    </div>
                                    <div class="animateDown">
                                        <img src="@/assets/images/landingpage/5.png" />
                                    </div>
                                </div> 
                            </div>
                        </div>
                    </v-col>
                </v-row>
            </div>
        </v-container>
    </div>
</template>
